<template>
  <note-communal action-key="note-persona">
    <n-flex vertical>
      <n-space justify="space-between">
        <n-button type="primary" @click="back">返回</n-button>
        <n-h3>我的笔记</n-h3>
      </n-space>
      <n-grid v-if="type === 'note'" x-gap="12" y-gap="8" :cols="4">
        <n-gi v-if="collectNoteRef.length" v-for="(item, index) in collectNoteRef" :key="index">
          <n-card hoverable @click="toPage('std/note/write',null ,false)">
            <template #cover>
              <n-image :width="100" :src="item.noteimg" preview-disabled/>
            </template>
            <n-space vertical>
              <n-p>{{ item.notetitle }}</n-p>
              <n-ellipsis xpand-trigger="click" :line-clamp="2" :tooltip="false" :style="{fontsize:'1rem'}">
                便捷保存和管理喜爱或常用的笔记/文章，快速访问，提升效率。
              </n-ellipsis>
            </n-space>
          </n-card>
        </n-gi>
        <n-gi v-else>
          <n-empty description="你还没有创建笔记" />
        </n-gi>

      </n-grid>
      <n-grid v-else x-gap="12" y-gap="8" :cols="4">
        <n-gi v-for="(item, index) in collectPostsRef" :key="index">
          <n-card hoverable @click="toPage('std/note/show',{postsId:item.id,uuid:item.uuid,type:'posts'} ,false)">
            <n-space vertical>
              <n-p>{{ item.title }}</n-p>
              <n-ellipsis xpand-trigger="click" :line-clamp="2" :tooltip="false" :style="{fontsize:'1rem'}">
                便捷保存和管理喜爱或常用的笔记/文章，快速访问，提升效率。
              </n-ellipsis>
            </n-space>
          </n-card>
        </n-gi>
      </n-grid>
    </n-flex>
  </note-communal>
</template>

<script>
import noteCommunal from "@/components/communal/note-communal.vue";
import {ref, inject,toRefs } from "vue";
import {getCollectNote, getCollectPosts} from "@/res/api/note_api.js";
import { useRoute } from 'vue-router';

export default {
  name: "ShowCollextView",
  components: {
    noteCommunal
  },
  setup(){
    const {toPage} = inject("toPage")
    // 接收路由传参
    let route = useRoute()
    let {query} = toRefs(route)
    function back(){
      history.go(-1)
    }
    let type = query.value.type;
    console.log(type)
    // 得到收藏夹中的笔记
    let collectNoteRef = ref([])
    let collectPostsRef = ref([])
    if (type === 'note'){
      getCollectNote({
        collectId: query.value.id
      }).then((res)=> {
        console.log("这里是笔记")
        console.log(res)
        collectNoteRef.value = res.data.list
      }).catch((err)=> {
        $message.error(err.message)
      })
    }
    else {
      getCollectPosts({
        collectId: query.value.id
      }).then((res)=> {
        console.log(res)
        collectPostsRef.value = res.data.list
      }).catch((err)=> {
        $message.error(err.message)
      })
    }

    return {
      toPage,back,collectNoteRef,collectPostsRef,type
    }
  }
}
</script>

<style scoped>

</style>
